<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>
  <!-- element-ui引入样式 展示数据的-->
  <link rel="stylesheet" href="/css/index.css">
  <!-- element-ui引入组件库 -->
  <script src="/js/index.js"></script>
  <!--引入axios库  从后端获取数据-->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="/js/axios.min.js"></script>
  <style>
    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }

    .el-header, .el-footer {
      background-color: #545c64;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      /*line-height: 200px;*/
    }


  </style>

</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
        <el-menu-item index="1">
          <a  @click="principal()"><el-avatar :size="size" :src="circleUrl"></el-avatar></a>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1" @click="goods()">我的订单</el-menu-item>
          <el-menu-item index="2-2" @click="favorite()">我的收藏</el-menu-item>
        </el-submenu>
        <el-menu-item index="4"><a href="/html/login.html" target="_blank">退出登录</a></el-menu-item>
      </el-menu>
    </el-header>

    <el-main :visible.sync="dialogFormVisible">
      <iframe
              :src="address"
              width="100%" height="300"
              frameborder="0"
      ></iframe>
    </el-main>
  </el-container>


  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="真实姓名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="form.sex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="生日" :label-width="formLabelWidth">
        <el-input v-model="form.birthday" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" :label-width="formLabelWidth">
        <el-input v-model="form.mobile" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="qq" :label-width="formLabelWidth">
        <el-input v-model="form.qq" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click="addUser()">确 定</el-button>
    </div>
  </el-dialog>
</div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        circleUrl: "https://img1.baidu.com/it/u=206872172,131870402&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500",
        sizeList: ["large"],
        tableData: {},
        form: {},
        title:"修改资料",
        dialogFormVisible:false,
        address:"/html/aaa.html"
      };
    },
    created: function () {//页面初始化时,需要执行的业务可以放入该方法
      this.loadData();
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      loadData() {
        let _this = this;
        //使用axios向后台发请求
        axios.get('/tuser/tick')
                .then(function (response) {
                  if (response.data.code == 200) {
                    _this.tableData=response.data.data
                    // alert(JSON.stringify(_this.tableData))
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
      },
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.form = this.tableData;
      },

      addUser(){
        let _this = this;
        axios.post("/tuser/update",
                this.form)
                .then(function (response) {
                  if (response.data.code == 200) {
                    _this.$message({
                      message: '成功',
                      type: 'success'
                    });
                    _this.dialogFormVisible = false;
                    _this.loadData();
                  }
                })
                .catch(function (error) {
                  _this.$message.error('错误');
                });
      },
      principal(){
        this.address="/html/aaa.html"
      },
      goods(){
        this.address="/html/order.html"
      },
      favorite(){
        this.address="/html/shoucang.html"
      }

    }
  })
</script>
</html>